<template>
  <div class="swiper-container">
      <swiper  :options="swiperOptions">
        <swiper-slide v-for="(banners,index) in banners" :key="index">
          <img :src="banners.image" alt="" class="swiper-img" @load="swiperImageLoad">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'swiperIndex',
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    banners: {
      type: Array
    }
  },
  data () {
    return {
      swiperOptions: {
        loop: true,
        autoplay: true,
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      isLoad: true
    }
  },
  methods:{
    swiperImageLoad(){
      // 这个方法会执行多次 我们只拿第一次的方法
      if(this.isLoad){
        this.$emit('swiperImageLoad')
        this.isLoad= false
      }
    }
  }
}
</script>
<style scoped>
.swiper-container {
  width: 100%;
  --swiper-pagination-color: #ff5776;/* 两种都可以 */
}
.swiper-img {
  width: 100%;
}
</style>
